<script lang="ts" setup>
import type { OpenCallbackMeta } from '@/components/CourseCategoryModal/type'
import type { OpenCallbackMeta as JumpLinkOpenCallbackMeta } from '@/components/JumpLinkModal/type'
import { type Course01Item, ECourse01Source, type Int32SelectCheckableTag } from '@/api/designer/model'
import AddButton from '@/components/AddButton/AddButton.vue'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import { type Course01ComponentMeta, JumpType } from '@/definitions/type'
import { useCompRefs } from '@/hooks/useCompRefs'
import { useCompStyle } from '@/hooks/useCompStyle'
import { useInstStore } from '@/stores'
import { boolishOptions } from '@/utils/constants'
import { Input, Popconfirm, Radio, RadioButton, RadioGroup, Select, Space } from 'ant-design-vue'
import { computed, toValue } from 'vue'
import { vDraggable } from 'vue-draggable-plus'

defineOptions({
  name: 'Course01Attr',
  inheritAttrs: true,
})

const { activeRender } = useCompStyle<Course01ComponentMeta>()
const instStore = useInstStore()
const courseCategorys = computed(() => instStore.jumpData?.courseCategorys || [])
const { CourseCategoryModalRef, JumpLinkModalRef } = useCompRefs()
function handleRemoveCategoryItem(item: Int32SelectCheckableTag) {
  const index = activeRender.value!.config.categorys!.findIndex(l => l.value === item.value)
  if (~index) {
    activeRender.value!.config.categorys!.splice(index, 1)
    // 同步移除courses中对应类目下的课程
    activeRender.value!.config.courses = activeRender.value!.config.courses!.filter(course => course.categoryId !== item.value)
  }
}
function handleRemoveCourseItem(item: Course01Item) {
  const index = activeRender.value!.config.courses!.findIndex(l => l.id === item.id)
  if (~index) {
    activeRender.value!.config.courses!.splice(index, 1)
  }
}
function handleAddCategory() {
  if (CourseCategoryModalRef.value) {
    CourseCategoryModalRef.value.open((activeRender.value!.config.categorys as any) || [], addCategoryCallback)
  }
}
function handleAddCourse() {
  if (JumpLinkModalRef.value) {
    JumpLinkModalRef.value.open({
      jumpType: JumpType.Course as any,
    }, addCourseCallback, {
      mode: 'multiple',
      selectedKeys: activeRender.value!.config.courses?.map(l => l.id),
    })
  }
}
function addCourseCallback({ applied, selectedItems }: JumpLinkOpenCallbackMeta) {
  if (applied && selectedItems) {
    activeRender.value!.config.courses!.length = 0
    activeRender.value!.config.courses!.push(...selectedItems as Course01Item[])
  }
}
function addCategoryCallback({ applied, value }: OpenCallbackMeta) {
  if (applied) {
    activeRender.value!.config.categorys!.length = 0
    activeRender.value!.config.categorys!.push(...value as any)
    // 将选中的类目下的课程保存到courses字段中
    if (instStore.jumpData && instStore.jumpData.courses) {
      const courses: Course01Item[] = []
      activeRender.value!.config.categorys!.forEach((category) => {
        const matchedCourses = instStore.jumpData!.courses!.filter(course => course.categoryId === category.value)
        if (matchedCourses.length > 0) {
          courses.push(...matchedCourses)
        }
      })
      activeRender.value!.config.courses!.length = 0
      activeRender.value!.config.courses!.push(...courses)
    }
  }
}
function handleSourceChange() {
  activeRender.value!.config.categorys!.length = 0
  activeRender.value!.config.courses!.length = 0
  initial()
}
function initial() {
  if (activeRender.value!.config.source === ECourse01Source.按分类读取 && activeRender.value!.config.categorys!.length === 0) {
    activeRender.value!.config.categorys!.push(...toValue(courseCategorys))
  }
}
initial()
</script>

<template>
  <div v-if="activeRender">
    <div class="setting-block">
      <div class="title-label">
        组件模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="setting-block">
      <div class="title-label">
        组件内容
      </div>
      <Space :size="14" direction="vertical" style="width: 100%;">
        <div class="inline-control">
          <div class="inline-control-label">
            课程来源
          </div>
          <div class="inline-control-block">
            <RadioGroup v-model:value="activeRender.config.source" @change="handleSourceChange">
              <Radio v-for="item of activeRender.config.sourceOptions" :key="item.value" :value="item.value">
                {{ item.label }}
              </Radio>
            </RadioGroup>
          </div>
        </div>
        <div v-if="activeRender.config.source === ECourse01Source.按分类读取" class="inline-control">
          <div class="inline-control-label">
            读取分类
          </div>
          <div class="inline-control-block flex-1">
            <div v-draggable="[activeRender.config.categorys, { animation: 150, handle: '.handle' }]" class="flex flex-col gap-3">
              <!-- item for loop -->
              <div v-for="item of activeRender.config.categorys" :key="item.value" class="flex flex-row gap-2 items-center">
                <div class="flex flex-row items-center px-3 h-10 box-border bg-[#F5F5F5] flex-1 gap-14px">
                  <div class="i-ant-design:holder-outlined font-bold w-5 h-5 text-third-app hover:text-primary-app handle" />
                  <div class="text-main-app text-sm">
                    {{ item.label }}
                  </div>
                </div>
                <Popconfirm title="确定删除该项吗？" ok-text="确定" cancel-text="取消" @confirm="handleRemoveCategoryItem(item)">
                  <i class="i-ant-design:close-circle-outlined flex-none w-5 h-5 cursor-pointer text-third-app hover:text-primary-app" />
                </Popconfirm>
              </div>
            </div>
            <AddButton @click="handleAddCategory()">
              添加分类
            </AddButton>
          </div>
        </div>
        <div v-else-if="activeRender.config.source === ECourse01Source.按顺序读取" class="inline-control">
          <div class="inline-control-label">
            读取课程
          </div>
          <div class="inline-control-block flex-1">
            <Select v-model:value="activeRender.config.sortType" :options="activeRender.config.sortTypeOptions" placeholder="请选择排序方式" class="w-full" />
          </div>
        </div>
        <div v-else-if="activeRender.config.source === ECourse01Source.自定义" class="inline-control">
          <div class="inline-control-label">
            读取课程
          </div>
          <div class="inline-control-block flex-1">
            <div v-draggable="[activeRender.config.courses, { animation: 150, handle: '.handle' }]" class="flex flex-col gap-3">
              <!-- item for loop -->
              <div v-for="item of activeRender.config.courses" :key="item.id" class="flex flex-row gap-2 items-center">
                <div class="flex flex-row items-center px-3 h-10 box-border bg-[#F5F5F5] flex-1 gap-14px">
                  <div class="i-ant-design:holder-outlined font-bold w-5 h-5 text-third-app hover:text-primary-app handle" />
                  <div class="text-main-app text-sm">
                    {{ item.name }}
                  </div>
                </div>
                <Popconfirm title="确定删除该项吗？" ok-text="确定" cancel-text="取消" @confirm="handleRemoveCourseItem(item)">
                  <i class="i-ant-design:close-circle-outlined flex-none w-5 h-5 cursor-pointer text-third-app hover:text-primary-app" />
                </Popconfirm>
              </div>
            </div>
            <AddButton @click="handleAddCourse()">
              添加课程
            </AddButton>
          </div>
        </div>
        <div class="inline-control">
          <div class="inline-control-label">
            显示描述
          </div>
          <div class="inline-control-block">
            <RadioGroup v-model:value="activeRender.config.isDisplayDescription">
              <Radio v-for="item of boolishOptions" :key="item.label" :value="item.value">
                {{ item.label }}
              </Radio>
            </RadioGroup>
          </div>
        </div>
        <div v-if="activeRender.config.source === ECourse01Source.按分类读取" class="inline-control">
          <div class="inline-control-label">
            显示推荐
          </div>
          <div class="inline-control-block">
            <RadioGroup v-model:value="activeRender.config.isDisplayRecommend">
              <Radio v-for="item of boolishOptions" :key="item.label" :value="item.value">
                {{ item.label }}
              </Radio>
            </RadioGroup>
          </div>
        </div>
        <div class="field-control">
          <div class="field-label">
            按钮文案
          </div>
          <Input
            v-model:value="activeRender.config.buttonText" placeholder="请输入按钮文案"
          />
        </div>
      </Space>
    </div>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.setting-block {
  @apply mb-6;
}

.title-label {
  color: var(--app-text-color-main);
  margin-bottom: 14px;
  @apply text-sm font-700;
}

.inline-control {
  @apply flex flex-row gap-8 items-start;

  .inline-control-label {
    color: var(--app-text-color-second);
    @apply text-sm flex-none;
  }

  .inline-control-block {
    color: var(--app-text-color-main);
    @apply text-sm;
  }
}
.field-control {
  color: var(--app-text-color-main);
  @apply flex flex-col gap-2;

  .field-label {
    color: var(--app-text-color-second);
    @apply text-sm;
  }
}
</style>
